<template>
  <div>
    <div class="InvestmentRecords3_1">
      目前已投资总金额：<span class="InvestmentRecords3_but1">{{ list2.propertyResidue-list2.residueMoney }}</span>
      元 剩余可投资金额：<span class="InvestmentRecords3_but2">{{
        list2.residueMoney
      }}</span>
      元
    </div>
    <div class="InvestmentRecords3_2">
      <el-table
        ref="multipleTable"
        :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        tooltip-effect="dark"
        style="width: 95%; margin: 0 auto;background-color: #999999;"
        :header-cell-style="{ background: 'silver', color: '#606266' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="investment_userName" width="358px" label="投资人" >
        </el-table-column>
        <el-table-column prop="investment_money" width="358px" label="投资金额（元）">
        </el-table-column>
        <el-table-column prop="investment_date" width="358px" label="投资时间">
        </el-table-column>
      </el-table>
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [], // 商品所有数据
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页的数据条数
       propertyId: null,
       list2:{}
    };
  },
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      //   alert(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    getSignInformation9() {
     this.propertyId = this.$route.query.propertyId;
     axios({
          url: "api/recordinves/getRecordInvesByIdList",
          method: "post",
          params: {
              propertyId:this.propertyId
          },
        }).then((res) => {
            this.list=res.data
           
        });
         axios({
          url: "api/invest/queryInvestmentGetById",
          method: "post",
          params: {
              propertyId:this.propertyId
          },
        }).then((res) => {
            this.list2=res.data
           
        });
    },
  },
  created() {
    this.getSignInformation9();
  },
};
</script>

<style>
.InvestmentRecords3_but2 {
  color: red;
  font-size: 110%;
}
.InvestmentRecords3_but1 {
  color: black;
  font-size: 110%;
}
.InvestmentRecords3_2 {
  width: 90%;
  float: left;
  margin-left: 5%;
}
.InvestmentRecords3_1 {
  width: 90%;
  height: 80px;
  float: left;
  margin-left: 5%;
  /* background-color: red; */
  line-height: 90px;
  color: #999999;
}
</style>